{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/article_add.css' %}">
{% endblock %}
{% block content %}
    <div class="container">
        <h1>发表文章</h1>
        <form id="articleForm" method="post">
        {% csrf_token %}
            {% for filed in form %}
            <div class="form-group">
                <label for="title">{{ filed.lable }}</label>
                {{ filed }}
                <span style="color: red;">{{ field.errors.0 }}</span>
            </div>
            {% endfor %}
            <button type="add-btn" class="submit-btn">发表文章</button>
            <span class="voice-btn" id="voiceInputBtn">🎙️</span>



            <div class="checkbox-group">
                <input type="checkbox" id="option1" name="option" value="1">
                <label for="option1">动漫</label>

                <input type="checkbox" id="option2" name="option" value="2">
                <label for="option2">周边</label>

                <input type="checkbox" id="option3" name="option" value="3">
                <label for="option3">轻小说</label>

                <input type="checkbox" id="option4" name="option" value="4">
                <label for="option4">game</label>

                <input type="checkbox" id="option5" name="option" value="5">
                <label for="option5">新闻</label>

                <input type="checkbox" id="option6" name="option" value="6">
                <label for="option6">改编</label>
                <span class="error-msg" style="color: red;position: absolute;"></span>
        </div>
        </form>
    </div>
{% endblock %}
{% block js %}
    <script>
        document.getElementById('major-introduction-link').addEventListener('click', function(event) {
            event.preventDefault();
            window.location.href = "./work2.html";
        });
    </script>
    <script>
        // 语音识别API
        var recognition = new webkitSpeechRecognition();
        recognition.continuous = true;
        recognition.interimResults = true;

        // 初始化语音识别
        function initVoiceRecognition() {
            recognition.lang = 'zh-CN';
            recognition.start();
        }

        // 语音识别结果处理
        recognition.onresult = function(event) {
            var interimTranscript = '';
            for (var i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    document.getElementById('messageInput').value = event.results[i][0].transcript;
                } else {
                    interimTranscript += event.results[i][0].transcript;
                }
            }
        };

        // 发送按钮点击事件
        document.getElementById('sendBtn').addEventListener('click', function() {
            var inputVal = document.getElementById('messageInput').value.trim();
            if (inputVal !== '') {
                var outputDiv = document.getElementById('messageOutput');
                outputDiv.innerHTML += '<div>' + inputVal + '</div>';
                document.getElementById('messageInput').value = ''; // 清空输入框
            }
        });

        // 语音输入按钮点击事件
        document.getElementById('voiceInputBtn').addEventListener('click', function() {
            if (recognition) {
                initVoiceRecognition();
            }
        });
    </script>
{% endblock %}